import { useState } from 'react';
import { useTheme } from '@/hooks/useTheme';
import { ChevronRight, Clock, Dumbbell, BarChart2, Award, Book, Heart, ArrowLeft } from 'lucide-react';
import { useNavigate } from 'react-router-dom';

// 定义力量训练部位类型
interface TrainingSection {
  id: string;
  title: string;
  day: string;
  description: string;
  image: string;
  exercises: Exercise[];
}

// 定义训练动作类型
interface Exercise {
  id: string;
  name: string;
  equipment: string;
  steps: string[];
  tips: string[];
  image: string;
}

// 力量训练数据
const strengthTrainingData: TrainingSection[] = [
  {
    id: 'chest',
    title: '胸肌训练',
    day: '第一天',
    description: '胸肌是上半身最引人注目的肌肉群之一，训练胸肌不仅能塑造完美体型，还能提升上肢力量和运动表现。',
    image: 'https://space.coze.cn/api/coze_space/gen_image?image_size=landscape_16_9&prompt=chest%20workout%20with%20bench%20press&sign=3ec8cadfc6c758c8857f339cf993b302',
    exercises: [
      {
        id: 'bench-press',
        name: '平板杠铃卧推',
        equipment: '杠铃、卧推架、护腕',
        steps: [
          '躺在卧推凳上，双脚平放在地面，调整身体位置使杠铃位于胸部正上方',
          '双手握杠，握距略宽于肩，手臂伸直支撑杠铃',
          '缓慢下放杠铃至胸部中下方，感受胸肌的拉伸',
          '用力推起杠铃至起始位置，注意保持核心收紧'
        ],
        tips: [
          '下放时吸气，推起时呼气',
          '避免耸肩和晃动腰部，保持身体稳定',
          '选择合适的重量，确保动作标准'
        ],
        image: 'https://space.coze.cn/api/coze_space/gen_image?image_size=square_hd&prompt=barbell%20bench%20press%20correct%20form&sign=2d1404111e40b3a2484fa1cff6f7712c'
      },
      {
        id: 'incline-dumbbell-press',
        name: '上斜哑铃卧推',
        equipment: '哑铃、上斜卧推凳',
        steps: [
          '调整卧推凳角度为30-45度，坐在凳上，双手各持哑铃',
          '躺下后，将哑铃举至肩上方，掌心向前',
          '缓慢下放哑铃至肩部两侧，肘部略低于肩部',
          '收缩胸肌，将哑铃推回起始位置'
        ],
        tips: [
          '上斜角度不宜过大，否则会过多锻炼三角肌前束',
          '保持哑铃平行运动，避免交叉或分开',
          '顶峰收缩时挤压胸肌，增强训练效果'
        ],
        image: 'https://space.coze.cn/api/coze_space/gen_image?image_size=square_hd&prompt=incline%20dumbbell%20press%20workout&sign=d101d0e617936f624e3ee7137ed641c7'
      },
      {
        id: 'cable-fly',
        name: '绳索飞鸟',
        equipment: '龙门架、绳索把手',
        steps: [
          '站在龙门架中间，双脚与肩同宽，微微屈膝',
          '双手握住绳索把手，手臂微屈，手肘略高于肩部',
          '保持手臂微屈，缓慢向中间靠拢，感受胸肌的收缩',
          '控制速度，缓慢回到起始位置'
        ],
        tips: [
          '整个动作过程中保持手臂微屈，不要完全伸直',
          '动作幅度应根据自身柔韧性调整，避免受伤',
          '重点感受胸肌的拉伸和收缩，而非使用大重量'
        ],
        image: 'https://space.coze.cn/api/coze_space/gen_image?image_size=square_hd&prompt=cable%20chest%20fly%20exercise&sign=a6e0792ef8e171b2288944f436953f4e'
      }
    ]
  },
  {
    id: 'back',
    title: '背部训练',
    day: '第二天',
    description: '背部是人体最大的肌肉群之一，强大的背部不仅能改善姿势，还能提升整体力量水平。背部训练应注重宽度和厚度的均衡发展。',
    image: 'https://space.coze.cn/api/coze_space/gen_image?image_size=landscape_16_9&prompt=back%20workout%20routine%20in%20gym&sign=f1e415415e73f3c0622378fbfc33178a',
    exercises: [
      {
        id: 'deadlift',
        name: '杠铃硬拉',
        equipment: '杠铃、重量片、硬拉垫',
        steps: [
          '站在杠铃前，双脚与肩同宽，杠铃位于脚掌中部',
          '屈膝弯腰，双手正握杠铃，握距略宽于肩',
          '保持背部挺直，核心收紧，用力将杠铃拉起至身体挺直',
          '缓慢下放杠铃至地面，保持控制'
        ],
        tips: [
          '整个过程保持背部挺直，避免弯腰弓背',
          '拉起时用腿力而非手臂力量',
          '下放时控制速度，感受背部肌肉的拉伸'
        ],
        image: 'https://space.coze.cn/api/coze_space/gen_image?image_size=square_hd&prompt=deadlift%20correct%20form%20guide&sign=01d70d5eb0c02f84d9f3c5ad03b479b4'
      },
      {
        id: 'pull-up',
        name: '引体向上',
        equipment: '单杠、助力带（可选）',
        steps: [
          '双手正握单杠，握距略宽于肩',
          '用力将身体向上拉，直到下巴超过单杠',
          '缓慢下放身体至手臂伸直，但不要完全放松',
          '重复动作'
        ],
        tips: [
          '初学者可以使用弹力带辅助或进行反向划船练习',
          '上拉时呼气，下放时吸气',
          '尽量避免摆动身体，保持动作稳定'
        ],
        image: 'https://space.coze.cn/api/coze_space/gen_image?image_size=square_hd&prompt=pull%20up%20exercise%20correct%20form&sign=fc7c7b2d45e62789f652dcae2d7a2feb'
      },
      {
        id: 'bent-over-row',
        name: '杠铃划船',
        equipment: '杠铃、重量片',
        steps: [
          '双手正握杠铃，握距与肩同宽',
          '屈膝弯腰，背部保持平直，上半身与地面约成45度',
          '将杠铃拉向腹部，手肘贴近身体两侧',
          '缓慢下放杠铃至手臂伸直'
        ],
        tips: [
          '保持背部挺直，避免晃动',
          '拉起时感受背部肌肉的收缩',
          '下放时控制速度，不要让杠铃自由下落'
        ],
        image: 'https://space.coze.cn/api/coze_space/gen_image?image_size=square_hd&prompt=barbell%20bent%20over%20row%20exercise&sign=e1e68fa1b4e74796bcfd31ef832d95a8'
      }
    ]
  },
  {
    id: 'shoulders',
    title: '肩部训练',
    day: '第三天',
    description: '肩部由三角肌前束、中束和后束组成，全面的肩部训练能打造立体挺拔的肩部线条，改善圆肩等不良姿势。',
    image: 'https://space.coze.cn/api/coze_space/gen_image?image_size=landscape_16_9&prompt=shoulder%20workout%20with%20dumbbells&sign=88eb68ac1ef3caef837e63bdda0fd8f2',
    exercises: [
      {
        id: 'overhead-press',
        name: '杠铃推举',
        equipment: '杠铃、推举架、坐姿凳',
        steps: [
          '坐姿或站姿，双手握杠，握距略宽于肩',
          '将杠铃从肩部推起至头顶上方，手臂伸直',
          '缓慢下放杠铃至肩部高度',
          '重复动作'
        ],
        tips: [
          '坐姿训练更专注于肩部肌肉，减少腿部借力',
          '保持核心收紧，避免腰部过度伸展',
          '下放时控制速度，感受肩部肌肉的拉伸'
        ],
        image: 'https://space.coze.cn/api/coze_space/gen_image?image_size=square_hd&prompt=barbell%20overhead%20press%20exercise&sign=5374d8af1f621a9f07f74bf974e78ba9'
      },
      {
        id: 'lateral-raise',
        name: '哑铃侧平举',
        equipment: '哑铃',
        steps: [
          '双脚与肩同宽站立，双手各持哑铃，手臂自然下垂',
          '保持手臂微屈，将哑铃向两侧举起至肩部高度',
          '缓慢下放哑铃至起始位置',
          '重复动作'
        ],
        tips: [
          '避免使用过大重量，以免借助身体摆动',
          '举起时手肘略高于手腕，集中刺激三角肌中束',
          '动作过程保持缓慢而稳定'
        ],
        image: 'https://space.coze.cn/api/coze_space/gen_image?image_size=square_hd&prompt=dumbbell%20lateral%20raise%20correct%20form&sign=9ce73080b15babf7404922d5ec513c16'
      },
      {
        id: 'face-pull',
        name: '绳索面拉',
        equipment: '龙门架、V型把手',
        steps: [
          '调整绳索高度至与眼睛平齐',
          '双手握住V型把手，双脚与肩同宽站立',
          '保持核心收紧，将把手拉向面部，手肘向两侧展开',
          '缓慢回到起始位置'
        ],
        tips: [
          '重点锻炼三角肌后束，改善圆肩姿势',
          '拉起时感受肩部后束的收缩',
          '避免使用过大重量，保持动作质量'
        ],
        image: 'https://space.coze.cn/api/coze_space/gen_image?image_size=square_hd&prompt=cable%20face%20pull%20exercise&sign=25db053e5f1e68b2e9de17ec493af1b9'
      }
    ]
  },
  {
    id: 'abs',
    title: '腹部训练',
    day: '第四天',
    description: '腹部训练不仅能塑造腹肌线条，还能增强核心稳定性，改善身体姿态。有效的腹部训练应包括上腹部、下腹部和侧腹肌群的锻炼。',
    image: 'https://space.coze.cn/api/coze_space/gen_image?image_size=landscape_16_9&prompt=abs%20workout%20routine%20in%20gym&sign=529d80cb21320e0d976255c22bfe5dc3',
    exercises: [
      {
        id: 'crunches',
        name: '仰卧起坐',
        equipment: '瑜伽垫',
        steps: [
          '仰卧在瑜伽垫上，膝盖弯曲，双脚平放在地面',
          '双手交叉放在胸前或轻触耳朵两侧',
          '收缩腹部肌肉，将上半身抬离地面约30-45度',
          '缓慢下放至上半身接近地面，但不完全接触'
        ],
        tips: [
          '避免用力拉扯颈部，保持下巴微收',
          '动作过程中保持腹部持续收紧',
          '可以在顶峰位置短暂停留，增强训练效果'
        ],
        image: 'https://space.coze.cn/api/coze_space/gen_image?image_size=square_hd&prompt=abdominal%20crunches%20correct%20form&sign=9be9da4f79735442aa3f00f2b2655e58'
      },
      {
        id: 'leg-raises',
        name: '悬垂举腿',
        equipment: '单杠或悬挂训练带',
        steps: [
          '双手握住单杠，身体悬垂，双脚并拢',
          '保持核心收紧，缓慢抬起双腿至与地面平行',
          '缓慢下放双腿至起始位置',
          '重复动作'
        ],
        tips: [
          '避免摆动身体，保持动作稳定',
          '如果力量不足，可以弯曲膝盖降低难度',
          '重点感受下腹部的收缩'
        ],
        image: 'https://space.coze.cn/api/coze_space/gen_image?image_size=square_hd&prompt=hanging%20leg%20raises%20exercise&sign=516cdd2e1ced0a7a06ebb40e7c2ed144'
      },
      {
        id: 'plank',
        name: '平板支撑',
        equipment: '瑜伽垫',
        steps: [
          '俯卧在瑜伽垫上，用前臂和脚尖支撑身体',
          '保持身体成一条直线，核心收紧，避免塌腰或撅臀',
          '保持呼吸均匀，坚持尽可能长的时间',
          '缓慢放松，回到起始位置'
        ],
        tips: [
          '保持肩部在肘部正上方，避免耸肩',
          '初学者可以从短时间开始，逐渐延长坚持时间',
          '可以尝试侧平板支撑，锻炼侧腹肌群'
        ],
        image: 'https://space.coze.cn/api/coze_space/gen_image?image_size=square_hd&prompt=plank%20exercise%20correct%20form&sign=e31df37de6792b20c8e0666251cf97e5'
      }
    ]
  },
  {
    id: 'legs',
    title: '腿部训练',
    day: '第五天',
    description: '腿部是人体最大的肌肉群，强壮的腿部不仅能提升运动表现，还能促进全身肌肉增长和代谢水平。腿部训练应包括股四头肌、腘绳肌和臀肌的全面锻炼。',
    image: 'https://space.coze.cn/api/coze_space/gen_image?image_size=landscape_16_9&prompt=leg%20workout%20routine%20with%20barbell%20squat&sign=7cb24cc8932d7a0b4f9aa1bbde8c1a79',
    exercises: [
      {
        id: 'back-squat',
        name: '杠铃深蹲',
        equipment: '杠铃、深蹲架、护膝（可选）',
        steps: [
          '将杠铃放在斜方肌上，双手握住杠铃保持平衡',
          '双脚与肩同宽或略宽，脚尖微微外展',
          '保持背部挺直，缓慢下蹲至大腿与地面平行',
          '用力站起，回到起始位置'
        ],
        tips: [
          '保持膝盖与脚尖方向一致，避免内扣',
          '下蹲时吸气，站起时呼气',
          '整个过程保持核心收紧，避免弯腰'
        ],
        image: 'https://space.coze.cn/api/coze_space/gen_image?image_size=square_hd&prompt=back%20squat%20correct%20form%20guide&sign=fb5ee9abbeb763fbab83ef426ef15d57'
      },
      {
        id: 'deadlift',
        name: '罗马尼亚硬拉',
        equipment: '杠铃、重量片',
        steps: [
          '双手正握杠铃，握距与肩同宽',
          '保持膝盖微屈，缓慢向前屈体，将杠铃下放至小腿中部',
          '感受腘绳肌的拉伸，然后用臀部力量将杠铃拉起至身体挺直',
          '重复动作'
        ],
        tips: [
          '整个过程保持背部挺直，膝盖保持微屈状态',
          '重点感受腘绳肌和臀肌的收缩',
          '下放时控制速度，避免猛拉'
        ],
        image: 'https://space.coze.cn/api/coze_space/gen_image?image_size=square_hd&prompt=romanian%20deadlift%20exercise&sign=d315b8d20cbc3e2fc0edf243b7ceb3e3'
      },
      {
        id: 'leg-press',
        name: '腿举',
        equipment: '腿举机',
        steps: [
          '坐在腿举机上，双脚平放在踏板上，与肩同宽',
          '缓慢推起踏板，直到腿部接近伸直但不锁定膝盖',
          '控制速度，缓慢下放踏板至大腿接近胸部',
          '重复动作'
        ],
        tips: [
          '调整合适的座椅位置，确保动作幅度充分',
          '避免膝盖内扣，保持与脚尖方向一致',
          '可以调整脚的位置，针对不同部位的肌肉进行训练'
        ],
        image: 'https://space.coze.cn/api/coze_space/gen_image?image_size=square_hd&prompt=leg%20press%20machine%20exercise&sign=b46e1469452e78bb5fc3be017a9588cc'
      }
    ]
  }
];

export default function StrengthTrainingDetail() {
  const { theme } = useTheme();
  const [activeSection, setActiveSection] = useState<string>(strengthTrainingData[0].id);
  const [expandedExercise, setExpandedExercise] = useState<string | null>(null);
  const navigate = useNavigate();

  const toggleExercise = (exerciseId: string) => {
    setExpandedExercise(expandedExercise === exerciseId ? null : exerciseId);
  };

  const currentSection = strengthTrainingData.find(section => section.id === activeSection);

  return (
    <div className={`min-h-screen flex flex-col ${theme === 'dark' ? 'dark bg-slate-900 text-white' : 'bg-white text-slate-900'}`}>
      {/* 导航栏 */}
      <header className="sticky top-0 z-40 bg-white/90 dark:bg-slate-900/90 backdrop-blur-md shadow-md">
        <div className="container mx-auto px-4 py-4 flex items-center">
          <button 
            onClick={() => navigate(-1)} 
            className="mr-4 p-2 rounded-full hover:bg-slate-100 dark:hover:bg-slate-800 transition-colors"
          >
            <ArrowLeft size={20} />
          </button>
          <h1 className="text-xl font-bold bg-gradient-to-r from-blue-600 to-orange-500 bg-clip-text text-transparent">
            力量训练指南
          </h1>
        </div>
      </header>

      <main className="flex-grow">
        {/* 介绍区域 */}
        <section className="py-8 bg-gradient-to-br from-blue-50 via-white to-orange-50 dark:from-blue-900/30 dark:via-slate-900 dark:to-orange-900/30">
          <div className="container mx-auto px-4">
            <div className="max-w-3xl mx-auto text-center">
              <h2 className="text-2xl md:text-3xl font-bold mb-4">一周五练力量训练计划</h2>
              <p className="text-slate-600 dark:text-slate-300">
                本计划按照胸、背、肩、腹、腿的顺序组织，帮助你全面发展全身肌肉群，
                提升力量和塑造完美体型。每个部位都包含详细的训练动作、器械使用说明和技巧提示。
              </p>
            </div>
          </div>
        </section>

        {/* 内容区域 */}
        <section className="py-10">
          <div className="container mx-auto px-4">
            {/* 部位选择器 */}
            <div className="flex overflow-x-auto pb-4 mb-8 gap-2 md:flex-wrap md:justify-center">
              {strengthTrainingData.map((section) => (
                <button
                  key={section.id}
                  onClick={() => setActiveSection(section.id)}
                  className={`px-4 py-2 rounded-full whitespace-nowrap transition-all duration-300 ${
                    activeSection === section.id
                      ? 'bg-blue-600 text-white shadow-lg shadow-blue-500/20'
                      : 'bg-white dark:bg-slate-800 text-slate-700 dark:text-slate-300 hover:bg-slate-100 dark:hover:bg-slate-700'
                  }`}
                >
                  {section.day} · {section.title}
                </button>
              ))}
            </div>

            {/* 当前部位内容 */}
            {currentSection && (
              <div className="max-w-5xl mx-auto bg-white dark:bg-slate-800 rounded-2xl shadow-xl overflow-hidden">
                {/* 部位头部 */}
                <div className="relative">
                  <img 
                    src={currentSection.image} 
                    alt={currentSection.title}
                    className="w-full h-64 md:h-80 object-cover"
                  />
                  <div className="absolute inset-0 bg-gradient-to-t from-black/70 via-black/30 to-transparent"></div>
                  <div className="absolute bottom-0 left-0 right-0 p-6">
                    <span className="inline-block px-3 py-1 bg-blue-600 text-white text-sm font-medium rounded-full mb-2">
                      {currentSection.day}
                    </span>
                    <h3 className="text-2xl md:text-3xl font-bold text-white mb-2">{currentSection.title}</h3>
                  </div>
                </div>

                {/* 部位描述 */}
                <div className="p-6">
                  <p className="text-slate-600 dark:text-slate-300 mb-8">
                    {currentSection.description}
                  </p>

                  {/* 训练动作列表 */}
                  <div className="space-y-6">
                    {currentSection.exercises.map((exercise) => (
                      <div 
                        key={exercise.id}
                        className={`rounded-xl overflow-hidden transition-all duration-300 ${
                          expandedExercise === exercise.id 
                            ? 'ring-2 ring-blue-500 dark:ring-blue-400' 
                            : 'bg-slate-50 dark:bg-slate-700/50 hover:bg-slate-100 dark:hover:bg-slate-700'
                        }`}
                      >
                        <div 
                          className="flex items-center justify-between p-4 cursor-pointer"
                          onClick={() => toggleExercise(exercise.id)}
                        >
                          <div className="flex items-center">
                            <div className="w-12 h-12 rounded-full bg-blue-100 dark:bg-blue-900/50 flex items-center justify-center mr-4">
                              <Dumbbell size={20} className="text-blue-600 dark:text-blue-400" />
                            </div>
                            <div>
                              <h4 className="font-semibold">{exercise.name}</h4>
                              <p className="text-sm text-slate-500 dark:text-slate-400">{exercise.equipment}</p>
                            </div>
                          </div>
                          <ChevronRight 
                            size={20} 
                            className={`transition-transform duration-300 ${
                              expandedExercise === exercise.id ? 'rotate-90' : ''
                            }`}
                          />
                        </div>

                        {/* 展开内容 */}
                        {expandedExercise === exercise.id && (
                          <div className="p-4 pt-0 border-t border-slate-200 dark:border-slate-700">
                            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                              <div>
                                <h5 className="flex items-center font-medium mb-3">
                                  <Book size={16} className="mr-2 text-blue-600 dark:text-blue-400" />
                                  动作步骤
                                </h5>
                                <ol className="list-decimal list-inside space-y-2 text-slate-600 dark:text-slate-300 mb-4">
                                  {exercise.steps.map((step, index) => (
                                    <li key={index}>{step}</li>
                                  ))}
                                </ol>

                                <h5 className="flex items-center font-medium mb-3">
                                  <Award size={16} className="mr-2 text-blue-600 dark:text-blue-400" />
                                  训练技巧
                                </h5>
                                <ul className="list-disc list-inside space-y-2 text-slate-600 dark:text-slate-300">
                                  {exercise.tips.map((tip, index) => (
                                    <li key={index}>{tip}</li>
                                  ))}
                                </ul>
                              </div>

                              <div className="rounded-xl overflow-hidden">
                                <img 
                                  src={exercise.image} 
                                  alt={exercise.name}
                                  className="w-full h-full object-cover rounded-xl"
                                />
                              </div>
                            </div>
                          </div>
                        )}
                      </div>
                    ))}
                  </div>
                </div>
              </div>
            )}
          </div>
        </section>

        {/* 训练建议 */}
        <section className="py-12 bg-slate-50 dark:bg-slate-800/50">
          <div className="container mx-auto px-4">
            <div className="max-w-3xl mx-auto">
              <h3 className="text-2xl font-bold mb-6 text-center">力量训练建议</h3>
              
              <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div className="bg-white dark:bg-slate-700 rounded-xl p-6 shadow-md">
                  <div className="w-12 h-12 rounded-full bg-blue-100 dark:bg-blue-900/50 flex items-center justify-center mb-4">
                    <BarChart2 size={20} className="text-blue-600 dark:text-blue-400" />
                  </div>
                  <h4 className="font-semibold mb-2">训练频率</h4>
                  <p className="text-slate-600 dark:text-slate-300 text-sm">
                    按照一周五练的计划，建议每训练两天休息一天，给肌肉足够的恢复时间。
                  </p>
                </div>
                
                <div className="bg-white dark:bg-slate-700 rounded-xl p-6 shadow-md">
                  <div className="w-12 h-12 rounded-full bg-blue-100 dark:bg-blue-900/50 flex items-center justify-center mb-4">
                    <Clock size={20} className="text-blue-600 dark:text-blue-400" />
                  </div>
                  <h4 className="font-semibold mb-2">训练时长</h4>
                  <p className="text-slate-600 dark:text-slate-300 text-sm">
                    每个部位的训练时间建议控制在45-60分钟，避免过长时间训练导致疲劳。
                  </p>
                </div>
                
                <div className="bg-white dark:bg-slate-700 rounded-xl p-6 shadow-md">
                  <div className="w-12 h-12 rounded-full bg-blue-100 dark:bg-blue-900/50 flex items-center justify-center mb-4">
                    <Heart size={20} className="text-blue-600 dark:text-blue-400" />
                  </div>
                  <h4 className="font-semibold mb-2">饮食与恢复</h4>
                  <p className="text-slate-600 dark:text-slate-300 text-sm">
                    训练后及时补充蛋白质和碳水化合物，保证充足的睡眠，促进肌肉修复和生长。
                  </p>
                </div>
                
                <div className="bg-white dark:bg-slate-700 rounded-xl p-6 shadow-md">
                  <div className="w-12 h-12 rounded-full bg-blue-100 dark:bg-blue-900/50 flex items-center justify-center mb-4">
                    <Award size={20} className="text-blue-600 dark:text-blue-400" />
                  </div>
                  <h4 className="font-semibold mb-2">渐进超负荷</h4>
                  <p className="text-slate-600 dark:text-slate-300 text-sm">
                    随着训练水平的提高，逐渐增加重量或次数，保持对肌肉的刺激，促进持续进步。
                  </p>
                </div>
              </div>
            </div>
          </div>
        </section>
      </main>

      {/* 页脚 */}
      <footer className="bg-slate-900 text-white py-6">
        <div className="container mx-auto px-4 text-center">
          <p className="text-slate-400 text-sm">
            © {new Date().getFullYear()} FitMaster 力量训练指南 | 专业健身知识教学平台
          </p>
        </div>
      </footer>
    </div>
  );
}